<template>
  <div>
    <div class="topic-tree" v-show="topicTreeShow">
      <div class="topTree">
        <span>数据目录</span>
        <span @click="topicTreeShow = !topicTreeShow">
          <svg-icon
            icon-class="close"
            class-name="close"
            font-size="16"
          ></svg-icon>
          <!-- <img src="./image/close.svg" alt="" /> -->
        </span>
      </div>
      <div class="treeInput">
        <fks-input
          placeholder="请输入关键字"
          clearable
          suffix-icon="fks-icon-search"
          v-model="inputValue"
          @keyup.enter="calAge"
        >
        </fks-input>
      </div>
      <div class="oneMap">空间一张图</div>
      <!-- 目录树列表 -->
      <div class="resource-tree">
        <!-- <ResourceTree class="model-inners" /> -->
        <fks-tree
          :data="treeList"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ data }">
            <span>
              <!-- <i :class="data.icon" style="font-size:20px color:red"></i
              >{{ data.label }} -->
              <svg-icon
                icon-class="eyeclose"
                class-name="eyeclose"
                font-size="16"
              ></svg-icon>
            </span>
            <span id="lableText">{{ data.label }}</span>
          </span>
        </fks-tree>
      </div>
    </div>
    <div
      id="treeButton"
      @click="topicTreeClick()"
      :style="this.topicTreeShow ? 'margin-left:364px' : 'margin-left:0'"
    >
      <span>数据资源</span>
    </div>
  </div>
</template>

<script>
// let chaos = null;
// let xuViewer = null;
// import ResourceTree from "./components/ResourceTree.vue";
// import axios from "axios";
export default {
  name: "TopicTree",
  components: {
    // ResourceTree,
  },
  props: {
    viewer: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      inputValue: "",
      topicTreeShow: true,
      treeList: [
        {
          label: "现状数据",
          icon: "fks-icon-info",
          children: [
            {
              label: "行政区划",
              children: [
                {
                  label: "区县级行政区划（2021年重新划定）",
                  icon: "eyeclose",
                },
                {
                  label: "街道界",
                },
              ],
            },
            {
              label: "遥感影像",
              children: [
                { label: "2021年影像（0.5m)" },
                {
                  label: "2020年影像（0.5m)",
                  url:
                    "http://172.18.109.232:8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyraster2020/Mapserver",
                },
                { label: "2019年影像（0.5m)" },
                {
                  label: "2018年影像（0.5m)",
                  url:
                    "http://172.18.109.232:8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyraster2018/Mapserver",
                },
              ],
            },
          ],
        },
        {
          label: "规划数据",
          children: [
            {
              label: "土地规划",
              children: [
                {
                  label: "土地利用总体规划(2019)",
                },
                { label: "建设用地管制区" },
              ],
            },
            {
              label: "三线管控",
              children: [
                {
                  label: "生态保护红线(最新)",
                },
                { label: "永久基地农田保护红线(最新)" },
                { label: "城镇开发边界(最新)" },
              ],
            },
          ],
        },
        {
          label: "管理数据",
          children: [
            {
              label: "生态修复实施工程数据",
              children: [
                {
                  label: "全域整治项目",
                },
                { label: "矿山生态修复项目" },
              ],
            },
            {
              label: "土地管理",
              children: [
                {
                  label: "土地整治",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    inputValue(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {},
  methods: {
    topicTreeClick() {
      this.topicTreeShow = !this.topicTreeShow;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      // console.log(data.url);
      if (data.url) {
        // console.log(22);
        viewer.imageryLayers.addImageryProvider(
          // .CGCS2000MapServerImageryProvider
          // let URL = url
          new Cesium.CGCS2000MapServerImageryProvider({
            name: "2222",
            url: data.url,
            // "https://kjzzyy.hzsgis.com:8082/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyraster2014/Mapserver",
            // "/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyraster2018/Mapserver",
            // "http://172.18.107.12/512834d664a4d3407b4c18ba3e8b3b66373945ec/ArcGIS/MapService/Catalog/生态保护红线.gis",
            suggest: true,
          })
        );
      }else {
        return
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.topic-tree {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0px 10px;
  position: absolute;
  top: 134px;
  width: 363px;
  height: 100%;
  background: rgba(11, 24, 39, 0.8);
  color: white;
  transition: 500ms width;
  .topTree {
    height: 40px;
    color: #fff;
    border-bottom: 1px solid rgb(80, 187, 236);
    display: flex;
    justify-content: space-between;
  }
}
.treeInput {
  padding-top: 10px;
}
::v-deep .fks-input__inner {
  background: transparent;
  color: #fff;
}
::v-deep .fks-input__inner:focus {
  border-color: #fff;
}
.oneMap {
  padding-top: 10px;
  padding-left: 10px;
  font-size: 14px;
  color: #0091ff;
  border-bottom: 2px solid #59b0f3;
}
#treeButton {
  position: absolute;
  top: 400px;
  width: 35px;
  height: 145px;
  margin-left: 364px;
  background: rgba(11, 24, 39, 0.85);
  cursor: pointer;
  span {
    display: inline-block;
    width: 20px;
    color: #fff;
    text-align: center;
    padding: 8px;
  }
}
.resource-tree {
  padding-top: 10px;
}
#lableText {
  margin-left: 10px;
}
::v-deep .fks-tree {
  background: transparent;
  color: white;
}
::v-deep .is-current,
is-focusable {
  color: white;
  background: transparent;
}

::v-deep .fks-tree-node__content {
  background: transparent;
  color: #ffffff;
}
</style>
